<template>
  <div class='capital'>
    <div class='top'>
      <div class='left'>
        <div class='left_last'>
          <span>发件时间：</span>
          <el-date-picker
             v-model="value1"
             type="datetimerange"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
             range-separator="至"
             style="width: 378px!important;margin-right: 20px;">
          </el-date-picker>
        </div>
        <div class='left_last'>
          <button @click="search">查询</button>
          <button @click="resert">重置</button>
        </div>
      </div>

    </div>
    <div class='capital_table'>
      <div class='moddle'>
        <el-table  :data='tableList' border style="width: 100%;" :max-height="maxHeight?maxHeight:maxheight" :row-style="{height:'60px',fontSize:'14px',color:'#30383e'}" :header-cell-style="thstyle" :cell-style="cellStyle" @cell-click='cellclick' min-width='130'>
          <el-table-column v-for='(item,index) in list' :key='index' :prop="item.key" :label="item.title" show-overflow-tooltip='false' align='center' >
          </el-table-column>
          <el-table-column label="操作" show-overflow-tooltip='false' align='center' >
            <template slot-scope="scope">
              <span style='margin-right: 20px;color: #356afa;cursor: pointer;' @click='$router.push({name:"sendBox",params:{id:tableList[scope.$index].id}})'>详情</span>
              <span style='color: #f54949;cursor: pointer;' @click="onDelete(scope.row)">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class='bottom'>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="defaultCurrentPage" :page-size="10" prev-text="上一页" next-text="下一页" layout="prev, pager, next, jumper, total" :total='total'>
        </el-pagination>
      </div>
    </div>
  </div>

</template>
<script>
import $ from "jquery";
import table from "../common/table.vue";
import numoudle from "../common/numodule.vue";
export default {
  components: {
    "v-table": table,
    "v-numodule": numoudle
  },
  created() {
    this.$parent.flag = true;
    this.getLetter();
  },
   mounted() {
 let that=this;
   setTimeout(()=>{
     $(".capital .capital_table").height($(".capital").height()-$(".top").height()-92);
   that.maxheight =document.querySelector(".capital_table").offsetHeight + "";
   window.onresize=function () {
     $(".capital .capital_table").height($(".capital").height()-$(".top").height()-92);
     that.maxheight =document.querySelector(".capital_table").offsetHeight + "";
   };
   },200)
 },
  methods: {
    handleSizeChange(val) {

    },
    handleCurrentChange(val) {
      this.defaultCurrentPage = val;
      this.currentPage= ((val-1) * 10);
      this.getLetter();
    },
    thstyle({ row, column, rowIndex, columnIndex }) {
      return {
        background: "rgb(37, 40, 52)",
        fontSize: "14px",
        color: "white",
        fontWeight: 400,
        height: "60px"
      }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === this.cloumn) {
        //指定列号
        return { color: "#5286ff", cursor: "pointer" };
      } else {
        return "";
      }
    },
    cellclick(row, column, cell, event) {
      if (this.cloumn === 8) {
        if (column.label == "操作") {
          this.$parent.popflag = true;
          this.$emit("pop", true);
        }
      }
      if (this.cloumn === 15) {
        if (column.label == "操作") {
          this.$router.push({ path: "/pickupPay" });
        }
      }
      if (this.cloumn === 11) {
        if (column.label == "操作") {
          //this.$router.push({ path: "" });
        }
      }
    },
    onDelete(row) {
       this.deleteID=row.id
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        u.deleteSendLetter({
          id:this.deleteID,
        },data=>{
         if(data.message=='成功'){
           //删除成功后再调一遍显示接口
              this.getLetter();
              this.$message({
              type: 'success',
              message: '删除成功!'
            });
         }else{
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
         }
        })

      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    //发件箱展示
    getLetter(){
       //获取发件箱接口
    u.getPersonLetter({
      type:0,
      currentCount:this.currentPage,
      pageSize:10,
      },data=>{
      if(data.data.list.length==0) return
      this.total=data.data.total;
      this.tableList=data.data.list.map((item,index)=>{
        return {
            tda:index+1,
            tdb:item.senderName,
            tdc:item.sendTitle,
            tdd:item.sendContent,
            date:item.sendTime,
            tde:item.strIsReply,
            id:item.id,
        }
      })
    })
    },
    //查询
    search(){

      u.sendTime({
        startTime:$('.el-range-input:first').val(),//开始时间
        endTime:$('.el-date-editor>.el-range-input:nth-child(4)').val(),//结束时间
        type:0,
        currentCount:this.currentPage,
        pageSize:10,
      },data=>{

         if(data.data.list.length==0){
           //置空
           this.tableList=[]
            return
         }else{
            this.total=data.data.total;
          this.tableList=data.data.list.map((item,index)=>{
            return {
                tda:index+1,
                tdb:item.senderName,
                tdc:item.sendTitle,
                tdd:item.sendContent,
                date:item.sendTime,
                tde:item.strIsReply,
                id:item.id,
            }
      })
         }

      })
    },
    //重置
    resert(){
      this.value1=''
      this.currentPage = 0
      $('.el-range-input:first').val('')
      $('.el-date-editor>.el-range-input:nth-child(4)').val('')
      this.search()
    }
  },
  data() {
    return {
      maxheight:'660px',
      defaultCurrentPage: 1,//默认当前页
      currentPage: 0,//点击的当前页
      total:'',//总页数
      deleteID:'',//删除ID
      value6: "",
      value7: "",
      value1:"",
      list: [
        { key: "tda", title: "ID" },
        { key: "tdb", title: "收件人" },
        { key: "tdc", title: "邮件主题" },
        { key: "tdd", title: "邮件摘要" },
        { key: "date", title: "发件时间" },
        { key: "tde", title: "状态" },
      ],
      tableList:[],
    };
  }
};
</script>
<style lang='less' scoped>
@import "../../../static/common/capital.less";
</style>
<style>
.el-date-editor .el-range-input{
      margin-left: 5px;
}
.left_last{
  margin-left: 0!important;
}
</style>


